{extend name="public:base" /}
{block name="head"}
<link href="__PUBLIC__/view_res/mobile/css/wshop_company_center.css" type="text/css" rel="Stylesheet" />
<link href="__PUBLIC__/view_res/mobile/css/uc.css" type="text/css" rel="Stylesheet" />
{/block} 
{block name="header"}
{include file="public/top-nav" /}
{/block}
{block name="content"}

	<div class="card">
	    <h5 class="card_title">{$art1.title}</h5>
	    {volist name="img" id="img"}
	    	<img class="image" src="{$img.img_path}" />
	    {/volist}
	    <p></p>
    </div>


    <style media="screen">
    body {
        background-color: #efeff4
    }

    .card {
        font-size: 14px;
        position: absolute;
        margin-bottom: 10%;
        width: 80%;
        top: 80px;
        left: 50%;
        transform: translate(-50%, 0%);
        overflow: hidden;
        border-radius: 2px;
        background-color: #fff;
        background-clip: padding-box;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        padding: 10px;
        color: #8f8f94;
        font-weight:bold;
    }
    .card>p>span{
        width: 120px;
        display: inline-block;
    }
    .card .card_title {
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        line-height: 60px;
    }
    .card .image{
    	width: 100%;
    	height: auto
    }
    .card .title {
        border-left: 2px solid #4ab8ec;
        font-size: 16px;
        line-height: 16px;
        padding-left: 4px;
        margin: 10px 4px;
        color: #000;
    }

</style>

<div id="outerdiv" style="position:fixed;top:13.5%;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>
{/block}


{block name="script"}
<script data-main="__RES__/mobile/js/shop_uchome.js" src="__RES__/mobile/js/require.min.js"></script>
<script type="text/javascript">
    //图片预览
    $('.image').click(function(){
        var _this = $(this);                            //将当前的pimg元素作为_this传入函数
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

    });
    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src");                    //获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);                     //设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();            //获取当前窗口宽度
            var windowH = $(window).height();           //获取当前窗口高度
            var realWidth = this.width;                 //获取图片真实宽度
            var realHeight = this.height;               //获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 1.2;                            //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) {         //判断图片高度
                imgHeight = windowH * scale;            //如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;      //等比例缩放宽度
                if (imgWidth > windowW * scale) {                   //如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;                     //再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {               //如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;                         //如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;      //等比例缩放高度
            } else {                                    //如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);           //以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2;           //计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2;          //计算图片与窗口上边距
            $(innerdiv).css({"top": h, "left": w});     //设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");                 //淡入显示#outerdiv及.pimg
        });
        $('#outerdiv').click(function () {              //再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
{/block}